<template>
  <div>
    <van-nav-bar title="广场" right-text="搜索" @click-right="goToSearch" />
    <van-swipe :autoplay="3000" :indicator-color="white">
      <van-swipe-item>2023 热门相机大赏</van-swipe-item>
    </van-swipe>
    <van-grid :gutter="16">
      <van-grid-item v-for="(item, index) in categoryList" :key="index" @click="goToCategory(item)">
        <van-image round :src="item.icon" width="40" height="40" />
        <p>{{ item.name }}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const categoryList = ref([
  { name: '数码相机', icon: 'https://example.com/camera.png' },
  { name: '美妆', icon: 'https://example.com/makeup.png' }
])

const goToSearch = () => router.push('/search')
const goToCategory = (item) => {
  console.log('跳转分类：', item.name)
}
</script>